<template>
	<view class="wanl-money" style="position: relative;">
		<view class=" padding-bj" style="padding-top: 96rpx;padding-bottom: 40rpx;text-align: center;color: #333;">
			<text class="title" style="font-size: 28rpx;">可用额度</text>
			<view class="margin-top margin-bottom-xs">
				<text class="text-sl" style="font-size: 64rpx;">{{user.auction_money}}</text>
			</view>
			<view style="width: 548rpx;height: 72rpx;background: linear-gradient( 270deg, #EF430F 0%, #F17E19 100%);border-radius: 12rpx;color: #fff;font-size: 28rpx;font-weight: bold;line-height: 72rpx;margin: 0 auto;" @tap="$wanlshop.to('/pages/user/money/transfer')">转账</view>
			
			<view style="background: rgba(51,51,51,0.5);border-radius: 8rpx;font-size: 24rpx;position: absolute;right: 16rpx;top: 24rpx;color: #fff;padding: 10rpx;">
				<view><text style="color: #F39800;margin-right: 6rpx;">今日收益</text>0</view>
				<view><text style="color: #F39800;margin-right: 6rpx;">今日支出</text>0</view>
				
			</view>
		</view>
		<!-- 功能 -->
		<view class="cu-list menu sm-border" v-if="false">
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/recharge')" v-if="false">
				<view class="content">
					<text class="wlIcon-chongzhichenggong text-blue"></text>
					<text>充值</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/turn')"  v-if="false">
				<view class="content">
					<text class="wlIcon-chongzhichenggong text-blue"></text>
					<text>增值收益转入</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/withdraw')"  v-if="false">
				<view class="content">
					<text class="wlIcon-tixianjilu text-orange"></text>
					<text>提现</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/transfer')">
				<view class="content">
					<text class="wlIcon-tixianjilu text-orange"></text>
					<text>转账</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/bank/bank')"  v-if="false">
				<view class="content">
					<text class="wlIcon-yinhangka text-blue"></text>
					<text>银行卡</text>
				</view>
				<view class="action">
					<text class="text-sm wanl-gray">用于提现到第三方账户</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/auction_money')" v-if="false">
				<view class="content">
					<text class="wlIcon-yue1 text-orange"></text>
					<text>易货额明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/witlist')"  v-if="false">
				<view class="content">
					<text class="wlIcon-jinbitixian text-orange"></text>
					<text>提现日志</text>
				</view>
			</view>
		</view>
		<view class="wanl-order-list" style="width: 700rpx;height: 90rpx;background: #FFFFFF;border-radius: 12rpx 12rpx 12rpx 12rpx;margin: 0 auto;">
			<view class="navbar">
				<view class="nav-item text-df" :class="{ current: tabCurrentIndex === 0 }" @tap="onTabChange(0)">收入记录</view>
				<view class="nav-item text-df" :class="{ current: tabCurrentIndex === 1 }" @tap="onTabChange(1)">手续费记录</view>
				<view class="nav-item text-df" :class="{ current: tabCurrentIndex === 2 }" @tap="onTabChange(2)">支出记录</view>
			</view>
		</view>
		<view class="cu-list menu-avatar" v-if="dataList">
				<view class="cu-item" style="flex-wrap: wrap;justify-content: space-between;padding: 20rpx;height: auto;" v-for="(item, index) in dataList" :key="item.id">
					<view class="content" style="position: relative;left: 0;">
						<view class="text-sm flex">
							<view class="text-cut" style="font-size: 28rpx;font-weight: bold;">
								{{item.memo}}
							</view> 
						</view>
						<!-- <view class="wanl-gray text-sm text-bold">{{payType[item.type]}}</view> -->
						<view class="wanl-gray text-sm">
							{{ $wanlshop.timeToDate(item.createtime) }}
						</view>
					</view>
					<view class="action">
						<view class="text-lg"  style="font-size: 28rpx;font-weight: bold;" :class="item.money > 0 ? 'wanl-orange' : 'wanl-black'">{{ item.money > 0 ? '+'+item.money:item.money}}</view>
						<view class="wanl-gray text-sm">
							{{ $wanlshop.timeToDate(item.createtime) }}
						</view>
					</view>
					<view style="width: 100%;padding: 20rpx 0;border-top: 2rpx solid #F5F5F5;margin-top: 20rpx;font-size: 24rpx;color: #999;">
						备注:{{item.memo}}
					</view>
				</view>
			</view>
			<!-- 空 -->
			<view v-if="dataList.length == 0">
				<wanl-empty src="ticket_default3x" text="没找到任何账单明细"/>
			</view>
			<view class="edgeInsetBottom"></view>
			<uni-load-more :status="status" :content-text="contentText" />
		
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			dataList: [],
			payType: {
				pay: '商品交易',
				groups: '拼团',
				recharge: '充值',
				withdraw: '提现',
				refund: '退款',
				sys: '系统',
			},
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		};
	},
	computed: {
		...mapState(['user'])
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},

	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/pay/getBalance',
				method: 'POST',
				success: res => {
					this.$store.commit('user/setUserInfo', {money: res.data});
				}
			});
			this.getList()
		},
		onTabChange (index) {
			this.tabCurrentIndex = index
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		async getList() {
			await uni.request({
					url: '/wanlshop/pay/auctionmoneyLog',
					method: 'POST',
					data: {
						page: this.current_page
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data); //数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			
		}
	}
};
</script>

<style>
	.navbar .nav-item {
		height: 88rpx;
	}
	.wanl-money {
		background: url("https://maileduo.oss-cn-shanghai.aliyuncs.com/uploads/20241231/a4564ccb9843401bdb8c253c873e7a64.png?x-oss-process=image/auto-orient,1/interlace,1/format,png/quality,q_90/sharpen,50/resize,m_mfit,w_1242") no-repeat top;
		background-size: 750rpx 1130rpx;
	}
.wanl-money .balance {
	margin: 10rpx 25rpx 25rpx 25rpx;
}

.wanl-money .balance .details {
	padding: 50rpx 0;
}

.wanl-money .balance .operate {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: rgba(0, 0, 0, 0.1);
	height: 80rpx;
	color: #fff;
}

.wanl-money .cu-list.menu-avatar>.cu-item{
	width: 700rpx;
	/* height: 208rpx; */
	background: #FFFFFF;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	margin: 20rpx auto;
/* 	height: 180rpx;
	align-items: flex-start; */
	padding: 20rpx 0;
}

.wanl-money .cu-list.menu-avatar>.cu-item .cu-avatar {
    width: 75rpx;
    height: 75rpx;
	left: 25rpx;
	margin-top: 6rpx;
}

.wanl-money .cu-list.menu-avatar>.cu-item .content {
    width: calc(100% - 75rpx - 25rpx -150rpx);
    line-height: 1.5em;
}

.wanl-money .cu-list.menu-avatar>.cu-item .action{
	width: 220rpx;
    text-align: right;
	padding-right: 25rpx;
}

</style>
